<script lang="ts">

export default {
    name: 'Person'
}
</script>

<script lang="ts" setup>

import { reactive } from 'vue'


// 对象类型
let car = reactive({
    brand: '奔驰',
    price: 100
})

// 数组类型
let game = reactive([
    { username: "张三丰", ganemsName: "王者荣耀" },
    { username: "秦子洋", ganemsName: "原神" },
    { username: "齐子阳", ganemsName: "三国志" },
    { username: "亲自样", ganemsName: "传说" }
])

// 深层次的对象类型

let number = reactive(
    {
        a: {
            b: {
                c: "666"
            }
        }
    }
)




function changePrice() {
    car.price += 10
}
function changeGamesByNumberOne() {
    game[0].ganemsName = '流星蝴蝶剑'
}

function changeNumber(){
    number.a.b.c = "999"
}
</script>


<template>
    <div class="person">
        <h1>一辆{{ car.brand }}车价值{{ car.price }}万</h1>
        <button @click="changePrice">修改汽车价格</button>
        <br>
        <ul>
            <li v-for="item in game" :key="item.username">
                游戏名{{ item.ganemsName }} 玩家名{{ item.username }}
            </li>
            <button @click="changeGamesByNumberOne">修改第一个游戏的名字</button>
        </ul>
        <h1>{{number.a.b.c}}</h1>
        <button @click="changeNumber">更改数字</button>
    </div>
</template>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0px 5px;
}
</style>